上一篇我們說到元素的特性，介紹了inline元素跟block元素。今天就來介紹：
這類元素，它的內容是透過引入外部資源(一串UR或是檔案路徑或是指定屬性類別)來顯示的。
比方像<img>元素，上一篇有提到，必須從屬性值指定，才能夠引入一張圖片來顯示在網頁上。
<img src="./image/pig.png">
如此一來，就可以看到這隻可愛的豬豬了。
*替換元素的特性，與排版也有很大的關係，將在CSS的視覺格式化模型時，好好談談，目前先知道它的基礎概念就好。
在元素內輸入的內容，可以直接顯現在網頁上，叫做非替換元素，例如<html>、<head>、<body>、<h1>、<p>、<div>、<span>、<em>、<strong>。
輸入內容直接呈現：
<h1>我是標題，是block元素也是非替換元素</h1>
<p>我是段落，是block元素也是非替換元素</p>
<div>我是block元素也是非替換元素</div>
<span>我是inline元素也是非替換元素</span>
<a href="##">我是連結，是inline元素也是非替換元素</a>
文檔的層級結構很重要，關乎到CSS選擇器的使用，到後來套Javascript的功能，或是更後來串後端給的API，都關乎到HTML檔的層級結構。
從下列這圖我們可以看從最上頭開始，從我們打開文字編輯器新增一個檔案，就產生了文檔(Document)，寫入的第一個元素，叫根元素<html>，從第一個元素長下去的都是第一個元素的後代元素。
層層疊的元素，在文檔裡看起來會像這樣(寫code應縮排，層級清楚，才具備可讀性)：
<html>
<head>
<title>網頁名稱</title>
</head>
<body>
<section>
<p>第一個段落</p>
<p>第二個段落</p>
</section>
</body>
</html>
上列元素關係說明：
我們可以拿google首頁來做簡單的練習，看著畫面來寫出Html架構：
還不認識元素沒關係，但可以先知道基礎文檔結構會長這樣：
<header>
<nav>
<a>Gmail</a>
<a>圖片</a>
<button>下拉選單</button>
<a href="#account"><img src="account.png"></a>
</nav>
</header>
<main>
<a href="#google"><img src="google.png"></a>
<input type="search">
<div>
<button>Google搜尋</button>
<button>好手氣</button>
</div>
</main>
<footer>
<div>
<span>台灣</span>
</div>
<div>
<nav>
<a src="#ad">廣告</a>
<a src="#bussiness">商業</a>
<a src="#manual">Google完全手冊</a>
<a src="#how_it_work">搜尋運作方式</a>
</nav>
<nav>
<a src="#privacy">隱私權</a>
<a src="#terms_of_service">服務條款</a>
<a src="#preference">設定</a>
</nav>
</div>
</footer>
今天的筆記到此告一段落～
*有任何錯誤或描述不夠精準之處，歡迎指教，非常感謝。
iThome鐵人賽
看影片追技術